<template>
    <div class="wrapper">
        <mt-header :title="title" class="no-bg">
            <mt-button icon="back" slot="left" @click="$router.back(-1)"></mt-button>
            <mt-button slot="right" @click="$router.back(-1)">
                <i class="icon iconfont icon-guanbi"></i>
            </mt-button>
        </mt-header>
        <div class="blank-9"></div>
        <div class="list">
            <div class="no-all-border" v-show="isShowEditModal">
                <mt-cell title="手机号" :value="mobile"></mt-cell>
            </div>
            <div v-show="isShowTestModal">
                <mt-field placeholder="请输入登入密码" disableClear type="password" v-model="inputValuePwd"></mt-field>
                <div class="text" v-show="userInfo && userInfo.loginPassword=='1'" @click="$router.push('/account/setting/editLoginPwd')">未设置？点击前往设置登入密码</div>
            </div>
            <div v-show="isShowChangeModal">
                <div class="bottom-border">
                    <mt-field placeholder="请输入您要绑定的手机号" disableClear type="number" v-model="inputValuePhone"></mt-field>
                </div>
                <countdown @sendValueToParent="getValueFromChild" :mobile="inputValuePhone"></countdown>
            </div>
        </div>
        <div class="blank-9"></div>
        <div>
            <div class="default-btn" v-show="isShowEditModal">
                <mt-button type="primary" size="large" @click.native="showTestModal">更换手机号</mt-button>
            </div>
            <div class="default-btn" v-show="isShowTestModal">
                <mt-button type="primary" size="large" :disabled="(userInfo && userInfo.loginPassword=='0'&&inputValuePwd)?false:true"  @click.native="validatePwd">下一步</mt-button>
            </div>
            <div class="default-btn" v-show="isShowChangeModal">
                <mt-button type="primary" size="large" :disabled="inputValuePhone&&inputValueCode?false:true" @click.native="bindPhone">绑定手机号</mt-button>
            </div>
        </div>

        <div class="tips" v-show="!isShowChangeModal">为确保账户资产，换绑前需要验证当前手机号。</div>
    </div>
</template>

<script>
import countdown from "@/components/Countdown"
import { validatePhone } from '@/utils/validate'
import { Toast } from 'mint-ui';
import { mapGetters } from 'vuex'
export default {
    data: function () {
        return {

            title:"手机号",
            mobile:'',

            isShowEditModal:true,
            isShowTestModal:false,
            isShowChangeModal:false,

            inputValuePwd:'',
            inputValuePhone:'',
            inputValueCode:''
        }
    },
    computed: {
        ...mapGetters([
            'userInfo'
        ])
    },
    mounted(){
        /* 隐藏手机号中间四位，变成*星号 */
        if(this.userInfo){
            this.mobile = this.userInfo.mobile.substr(0, 3) + '****' + this.userInfo.mobile.substr(7);
        }
    },
    components:{
        countdown
    },
    methods: {
        getValueFromChild(value){
            this.inputValueCode = value;
        },
        showTestModal(){
            this.title = '验证账号';
            this.isShowEditModal = false;
            this.isShowTestModal = true;
            this.isShowChangeModal = false;
        },
        validatePwd(){
            //验证登录密码 验证身份
            this.$store.dispatch('Login',{
                mobile : this.userInfo.mobile,
                loginPassword : this.inputValuePwd
            }).then((res) => {
                if( res.code == 200 ){
                    this.title = '更换手机号';
                    this.isShowEditModal = false;
                    this.isShowTestModal = false;
                    this.isShowChangeModal = true;
                }else{
                    Toast({
                        message: res.msg,
                        className: 'innputPhoneToast'
                    });
                }
            })
        },
        bindPhone(){
            //密码登录
            if( validatePhone(this.inputValuePhone) ){
                if( this.inputValuePhone == this.userInfo && this.userInfo.mobile ){
                    Toast({
                        message: '更换的手机号不能相同',
                        className: 'innputPhoneToast'
                    });
                }else{
                    this.$store.dispatch('UpdateInfo',{
                        "mobileOld":this.userInfo && this.userInfo.mobile,
                        "mobile":this.inputValuePhone,
                        "validationCode":this.inputValueCode
                    }).then((res) => {
                        if( res.code == 200 ){
                            Toast({
                                message: "已设置",
                                iconClass: 'icon iconfont icon-ic_check'
                            })
                            this.$router.push('/account/setting/editPhone');
                        }else{
                            Toast({
                                message: res.msg,
                                iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                            });
                        }
                    })
                }
            }else{
                Toast({
                    message: '请输入正确格式的手机号',
                    className: 'innputPhoneToast'
                });
            }
        }
    },
}
</script>

<style lang="stylus" scoped>
.wrapper{
  .text{
    color: #f00;
    margin: 10px 0;
    font-size: 12px;
  }
}
</style>
